<template>
 <!-- (4)使用total来v-show是因为只有有选项才能谈(删除)全选-->
 <div class="todo-footer" v-show="total">
    <label>
      <!-- (5)这里也可v-model来替代，那么此时不需要既写:checked 又写@change
             以后知道了，v-model 既可以让绑定的值有初始值，而且还可以控制值的变化(交互)
           (6)从(5)还可以看出 input随着类型的变化(这里是checked)，v-model绑定的值也会变
              这里就从value值变成了checked 
      -->
<!--      <input type="checkbox" :checked="isAll" @change="checkAll"/>-->
      <input type="checkbox" v-model="isAll"/>
    </label>
    <span>
       <span>已完成{{ doneTotal }}</span> / 全部{{todos.length}}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
  export default {
    name: "MyFooter",
    props:['todos','checkAllTodo','clearAllTodo'],
    computed:{
      // (2) 模板里尽量不要用表达式，计算要全放computed里面
      total(){
        return this.todos.length
      },
      doneTotal(){
        /**
         * (1) 数组的reduce方法可以对数据进行统计，第一个参数是如何统计，第二个是数组初始索引
         *     pre是每一次函数的返回值，刚开始是0
         *     current是当前元素
         * */ 
         return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0),0)
      },
      isAll:{
         get(){
            // (3) total>0是因为首先得有数据才算得上全选，这里是 单个item 影响 全选按钮
            return this.total === this.doneTotal && this.total > 0
         },
            // (7) 由于checked类型的input在变化值的时候 变的只能是checked值，因此传过来就是全选的checked值  
         set(e){
            this.checkAllTodo(e)
         }
      },
    },
    methods: {
        clearAll(){
            this.clearAllTodo()
        }
    },
  };
</script>

  <style scoped>
  /*footer*/
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }
  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>
